<template>
  <page-frame>
    <div class="departmentSetting">
      <div class="toptitle">
        <div class="left">部门配置</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="addCare()">新增部门</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="dept"
          label="部门名称"
          width="">
        </el-table-column>
        <el-table-column
          prop="desc"
          label="部门描述"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <!--template子组件，通过scope.row拿到整列的内容，@click.stop="edit(scope.row)必须写的-->
          <template scope="scope">
            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click.stop="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="部门配置" :visible.sync="dialogTableVisible" :before-close="handleClose">
        <div class="consultingNewComplaint">
          <div class="file-content">
            <el-form :model="dialogRuleForm" :rules="rules" ref="dialogRuleForm" label-width="160px">
              <el-form-item label="所属机构:" prop="name">
                <el-input v-model="dialogRuleForm.name" disabled></el-input></el-form-item>
              <el-form-item label="部门名称:" prop="deptName">
                <el-input v-model="dialogRuleForm.deptName" disa bled placeholder="请输入部门名称" :disabled="ways"></el-input>
              </el-form-item>
              <el-form-item label="部门描述" prop="deptDesc">
                <el-input v-model="dialogRuleForm.deptDesc" disabled placeholder="请输入部门描述"
                          :disabled="ways"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
        </span>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="del">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script>
  import orgDeptApi from '../../service/corporation/orgDeptApi'
  import staffApi from '../../service/corporation/staffApi'
  export default {
    data() {
      return {
        isAdd: true,
        dialogTableVisible: false,
        tableData: [
          {
            dept:"",//部门信息
            deptId:"",//部门id
            desc:""//部门描述
          },
        ],
        loginInfo: {},
        currentCateObj: {},
        ways: false,
        emps: [],
        //提交的表单，上传到后端的数据
        ruleForm: {
          lDescription: "",//照护等级描述
          lName: "",//照护等级名称
          name: ""//机构名称
        },
        dialogRuleForm: {
          deptName:"",//部门信息
          deptId:"",//部门id
          deptDesc:""//部门描述
        },
        //判断部门名称是否填写
        rules: {
          deptName: [
            {required: true, message: '请输入部门名称', trigger: 'blur'},
          ],
        },
      }
    },
    methods: {
      init() {
        this.getCurrentOrgInfo();
//        this.loadTableData();
      },
      /**
       * 获取当前登录机构信息
       */
      getCurrentOrgInfo() {
        let self = this;
        staffApi.getLoginPersonInfo().then(
          (response) => {
            if (response.data.status == 200) {
              self.loginInfo = response.data.data;
              self.loadTableData();
            } else {
            }
          },
        );
      },
      /**
       * 加载页面数据
       */
      loadTableData() {
        let self = this;
        orgDeptApi.listDept().then(
          (response) => {
            if (response.data.status == 200) {
              self.tableData = response.data.data;
            } else {
            }
          },
        );
      },
      /**
       * 新增跳转
       **/
      addCare() {
        this.dialogTableVisible = true;
        this.dialogRuleForm.name = this.loginInfo.orgName;
        this.dialogRuleForm.deptName = '';
        this.dialogRuleForm.deptDesc = '';
        this.isAdd = true;
      },

      /**
       * 编辑
       */
      edit(row) {
        this.dialogTableVisible = true;
        this.$refs['dialogRuleForm'].resetFields();
        this.dialogRuleForm.name = this.loginInfo.orgName;
        this.dialogRuleForm.deptId = row.deptId;
        this.dialogRuleForm.deptName = row.dept;
        this.dialogRuleForm.deptDesc = row.desc;
        this.isAdd = false;
      },
      /**
       * 删除
       */
      remove(row) {
        let self = this;
        self.$confirm('是否要删除当前部门', '删除部门', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //判断部门下时候存在员工
          orgDeptApi.deptEmp(row.deptId).then(
            (response) => {
              if (response.data.data.msg == '0'){
                orgDeptApi.removeDept(row.deptId).then(
                  (response) => {
                    if (response.data.status == 200) {
                      self.$message({
                        type:'success',
                        message:'删除部门成功'
                      });
                      this.loadTableData();
                    } else {
                      self.$message({
                        type: 'error',
                        message: '删除部门失败'
                      });
                      this.loadTableData();
                    }
                  },
                );
              } else {
                open()
                {
                  self.$message('当前部门：' + row.dept + '下存在部门在职员工，请先全部更换员工部门后再删除', '删除提醒', {
                    confirmButtonText: '确定',
                    callback: action => {
                      self.$message({
                        type: 'warning',
                        message: '已取消删除'
                      });
                    }
                  });
                }
                ;
              }
            }
          );

        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      /**
       * 提交
       */
      submit(dialogRuleForm) {
        this.$refs[dialogRuleForm].validate((valid) => {
          if (valid) {
            if (!this.isAdd) {
              //编辑
              orgDeptApi.updateDept(this.dialogRuleForm).then(
                (response) => {
                  if (response.data.status == 200) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    });
                    this.loadTableData();
                    this.dialogTableVisible = false;
                  } else {
                    this.loadTableData();
                    this.dialogTableVisible = true;
                  }
                }
              );
            } else {
              //新增
              orgDeptApi.saveDept(this.dialogRuleForm).then(
                (response) => {
                  if (response.data.status == 200) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    });
                    this.loadTableData();
                    this.dialogTableVisible = false;
                  } else {
                    this.loadTableData();
                    this.dialogTableVisible = true;
                  }
                }
              );
            }
          } else {
            return false;
          }
        });
      },
      confirm() {
        this.submit('dialogRuleForm');
      },
      del() {
        this.dialogTableVisible = false;
        this.$refs['dialogRuleForm'].resetFields();
        this.loadTableData();
      },
      handleClose(done) {
        this.$refs['dialogRuleForm'].resetFields();
        done();
      },
    },
    mounted: function () {
      this.init();
    },
  };
</script>
<style>
  .consultingNewComplaint .el-autocomplete {
    width: 100%;
  }

  .consultingNewComplaint .edit .el-form-item__error {
    margin-top: 100px;
  }

  .departmentSetting .el-dialog--small {
    width: 35%;

  }
</style>



